import Login from "./pages/account/Login"
import UserInfo from "./pages/account/UserInfo"
import Tabbar from "./Tabbar"
import TanHua from "./pages/friend/TanHua"
import Search from "./pages/friend/Search"
import TestSoul from "./pages/friend/TestSoul/TestSoul"
import TestQA from "./pages/friend/TestSoul/TestQA"
import TestResult from "./pages/friend/TestSoul/TestResult"
import Detail from "./pages/friend/Detail"
import Chat from "./pages/message/Chat"
import Comment from "./pages/group/home/recommend/Comment"
import Publish from "./pages/group/home/recommend/Publish"
import Follow from "./pages/my/Follow"
import Trends from "./pages/my/Trends"
import Visitors from "./pages/my/Visitors"
import UserUpdate from "./pages/my/UserUpdate"
import Settings from "./pages/my/Setting"

import {NavigationContainer} from "@react-navigation/native"
import {createNativeStackNavigator} from "@react-navigation/native-stack"
import StatusBarContainer from "./components/StatusBarContainer"
import {store} from "./store"
import {navigationRef} from "./utils/navigation"
import {useDispatch, useSelector} from "react-redux"
import {
  selectConfirm,
  selectShow,
  selectShowToast,
  toggleToast,
} from "./store/system/systemSlice"
import {
  THConfirmModal,
  THLoadingModal,
  THToastModal,
} from "./components/THModel"

// 2. 创建堆栈导航器
const Stack = createNativeStackNavigator()

// 3. 配置路由结构
function RootStack() {
  const token = store.getState().user.token
  return (
    <Stack.Navigator
      initialRouteName={token ? "Tabbar" : "Login"}
      screenOptions={{headerShown: false}}>
      <Stack.Screen name="Login" component={Login} />
      <Stack.Screen name="UserInfo" component={UserInfo} />
      <Stack.Screen name="Tabbar" component={Tabbar} />
      <Stack.Screen name="TanHua" component={TanHua} />
      <Stack.Screen name="Search" component={Search} />
      <Stack.Screen name="TestSoul" component={TestSoul} />
      <Stack.Screen name="TestQA" component={TestQA} />
      <Stack.Screen name="TestResult" component={TestResult} />
      <Stack.Screen name="Detail" component={Detail} />
      <Stack.Screen name="Chat" component={Chat} />
      <Stack.Screen name="Comment" component={Comment} />
      <Stack.Screen name="Publish" component={Publish} />
      <Stack.Screen name="Follow" component={Follow} />
      <Stack.Screen name="Trends" component={Trends} />
      <Stack.Screen name="Visitors" component={Visitors} />
      <Stack.Screen name="UserUpdate" component={UserUpdate} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  )
}

// 4. 应用入口组件
export default function Router() {
  const show = useSelector(selectShow)
  const showToast = useSelector(selectShowToast)
  const showConfirm = useSelector(selectConfirm)
  const dispatch = useDispatch()
  return (
    // 包裹在NavigationContainer中以启用导航功能
    <NavigationContainer ref={navigationRef}>
      <THLoadingModal isVisible={show} />
      <THConfirmModal />
      <THToastModal
        isVisible={showToast.show}
        text={showToast.text}
        onClose={() => dispatch(toggleToast({show: false, text: ""}))}
      />
      <THConfirmModal {...showConfirm} />

      <StatusBarContainer>
        <RootStack />
      </StatusBarContainer>
    </NavigationContainer>
  )
}
